<template>
  <div class="app-container home" v-loading="loading">
    <!-- app-container -->
    <h1 style="text-align: center;">测试页面</h1>

  <el-form>
    <el-form-item label="是否开启自动查询" prop="siteId">
      <el-switch
        v-model="start"
        class="ml-2"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      />
    </el-form-item>
  </el-form>
    <el-button type="warning">查询倒计时：{{ flag }}秒</el-button>
    <div style="width: 800px; height: 150px; margin: 20px 20px; background-color: rgb(169, 181, 247);">{{ content }}</div>
    <el-button type="success">这是第：{{ count }}次查询</el-button>
  </div>
</template>

<script setup name="TestPages">
  import { listFactorySite } from "@/api/SYSConfig/factorySite"
  import { watch } from "vue"

  const loading = ref(false)
  const flag = ref(300)
  const content = ref()
  const count = ref(0)
  const start = ref(false)

  var timer = null
  watch(() => start.value, (val, preVal) => {
    if(val){
      timer = setInterval(() => {
        flag.value--
        if(flag.value === 0){
          flag.value = 300
          listFactorySite().then(response => {
            console.log(response.rows)
            content.value = response.rows
            count.value++
          })
        }
      }, 1000)
    } else {
      window.clearInterval(timer)
    }
  }, {
    immediate: true
  })
</script>

